<template>
    <div :id="id">
        <h2>当前求和为：{{ sum}}</h2>
        <button @click="increment">点我 + 1</button>
        <button @click="decrement">点我 - 1</button>

        <br/>
        <!-- <img v-for="(u,index) in dogList" :key="index" :src="(u.message as string)"/> -->
        <span v-show="dogList.isLoading">加载中。。。。。。。</span>
        <button @click="getDog" > 再来一只狗</button>
        <br/>
        <button @click="localVisite">访问本地网络</button>
        <span v-for="(s,index) in klineList " :key="index" >{{s as string}}</span>
    </div>
</template>

<script setup lang="ts"  name = "person">
import {ref} from 'vue'
import useSum from '@/hooks/useSum';
import useDog from '@/hooks/useDog';
import axios from 'axios';
import type { Key } from 'readline';

let {sum,increment,decrement} = useSum()
let {dogList,getDog} = useDog()

let id = ref('person')

let klineList = ref<string>([])

//本地访问
function localVisite(){
    axios.get("http://localhost:8080/trading/hello")
    .then(function (response){
        console.log(response.data)
        klineList.value.push(response.data)
        
        //处理错误情况
        console.log(res.data)
        //处理错误情况
    }).catch(function (error){

    })
}

defineExpose({})
</script>


<style>
    #id{
        width:  95%;
        border: 2px solid salmon;
        background-color: aquamarine;
    }

    button{
        border: 2px solid;
        background-color: blanchedalmond;
        border-radius: 3%;
        margin-top: 10px;
        margin-left: 20px;
    }
</style>

